<template>
  <div class="app-container">
    <div class="receiTop">
      <el-row style="width: 100%;">
        <el-col :span="11">
          <div style="display: flex">
            <div class="ydh">商品标签：</div>
            <el-input v-model="skucode" placeholder="请输入或扫描条码" clearable/>
          </div>
        </el-col>
        <el-col :span="1">

        </el-col>
        <el-col :span="11">
          <div style="display: flex">
            <div class="ydh">SKU库位：</div>
            <el-input v-model="skuKw" placeholder="库位条码" clearable/>
          </div>
        </el-col>
      </el-row>

    </div>
    <el-row style="margin: 10px 0">
      <el-col :span="3">
        <span class="erpLabel">待上架：</span>
        <span style="font-size: 24px;color: #004BCB">300</span>
      </el-col>
      <el-col :span="3">
        <span class="erpLabel">已上架：</span>
        <span style="font-size: 24px;color: #B8741A">10</span>
      </el-col>
    </el-row>
    <vxe-table
        border
        show-overflow
        style="margin-top: 20px;"
        align="center"
        :data="tableList"
        :height="tableHeight"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="name"  title="SKU编码"></vxe-column>
      <vxe-column field="name" width="300" title="商品名称"></vxe-column>
      <vxe-column field="name"  title="商品图片"></vxe-column>
<!--      <vxe-column field="name"  title="商品条码"></vxe-column>-->
      <vxe-column field="name"  title="上架库位"></vxe-column>
      <vxe-column field="name"  title="待上架数量"></vxe-column>
      <vxe-column field="name"  title="已上架数量"></vxe-column>

    </vxe-table>
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
  </div>
</template>

<script setup>

import {nextTick, ref} from "vue";

let skucode = ref('')
let skuKw = ref('')
let tableList =ref([])
let total=ref(1)
let queryParams=ref({
  pageNum:1,
  pageSize:20
})
let tableHeight = ref(0);
nextTick(() => {
  tableHeight.value = window.innerHeight - 400;
})
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 400;
}
function getList(){

}
</script>

<style scoped lang="scss">
.receiTop {
  display: flex;
  .ydh {
    font-size: 30px;
    font-weight: bold;
    width: 200px;
    line-height: 100px;
  }
  :deep(.el-input__inner) {
    font-size: 24px;
    height: 100px !important;
  }
}
.erpLabel {
  font-size: 24px;
  font-weight: bold;
}
</style>